<template>
  <div class="oe-login" v-loading="loading">
    <div class="login-top">
      <div class="login-top-content">
          <img src="../assets/images/logo-school.png" alt />
        <div class="login-top-text">
          <span>智慧教育考试平台</span>
        </div>
         <a-tooltip placement="bottom" overlayClassName="tooltipss">
          <template slot="title">
            <div style="text-align: center; padding: 5px; display: inline-block; width: 50%">
              <img src="../assets/images/e-exam.png" style="display: block; width: 100%; height: 100%" alt />
              <a-button type="primary" style="margin-top: 10px; background: #bee1fd; color: #1890ff"
                ><a href="https://exam.icve.com.cn/app/E-exam.apk" target="_blank" rel="noopener noreferrer"
                  >安卓下载</a
                >
              </a-button>
            </div>
            <div style="text-align: center; padding: 5px; display: inline-block; width: 50%">
              <img src="../assets/images/ios-exam1.png" style="display: block; width: 100%; height: 100%" alt />
              <a-button type="primary" style="margin-top: 10px; background: #bee1fd; color: #1890ff"
                ><a
                  href="https://apps.apple.com/cn/app/e%E8%80%83%E8%AF%95/id1519369930"
                  target="_blank"
                  rel="noopener noreferrer"
                  >IOS下载</a
                >
              </a-button>
            </div>
          </template>
          <div class="login-top-content_right">
            <img src="../assets/images/icon-mobil.png" alt />
            <span class="phone">客户端下载</span>
          </div>
        </a-tooltip>
         <div class="help">
          <img src="../assets/images/icon-help.png" alt />
          <a class="login-top-help" href="https://help.icve.com.cn/exam/" target="_blank"> 帮助中心 </a>
        </div>
      </div>
    </div>
    <div class="login-center">
      <div class="login-center-content">
        <div class="content">
          <!-- <div class="content-left">
            <img src="../assets/images/login-bg.svg" alt="" />
          </div> -->
          <div class="content-right">
            <p class="content-user">用户登录</p>

            <div class="select-box" v-if="schoolShow">
              <a-icon
                type="bank"
                style="color: #1E8DFD;font-size:24px;position: absolute;z-index: 1;margin-left: 3px;"
              />
              <a-select
                showSearch
                placeholder="请选择学校"
                v-model="schoolName"
                optionFilterProp="children"
                style="width: 100%;margin-bottom:20px"
                :allowClear="true"
                :filterOption="false"
                @search="handleSearch"
                @change="handleChange"
                @focus="handleFocus"
              >
                <a-select-option v-for="(item, index) in schoolList" :index="index" :key="item.id">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
            <a-input placeholder="请输入用户名" v-model="userName" ref="userNameInput">
              <a-icon slot="prefix" type="user" style="color: #1E8DFD;font-size:24px" />
            </a-input>
            <a-input-password placeholder="请输入登录密码" v-model="password" ref="userNameInput">
              <a-icon slot="prefix" type="lock" style="color: #1E8DFD;font-size:24px" />
            </a-input-password>
            <div class="six-digit-wrapper" v-if="passInput">
              <div style="color: #1E8DFD;margin-bottom: 5px;" v-if="this.useType == 2">请输入授权码</div>
              <div style="color: #1E8DFD;margin-bottom: 5px;" v-else>请输入口令</div>
              <a-input
                v-for="(item, index) in digits"
                :key="index"
                :ref="`ref${index}`"
                class="input"
                style="border: 1px solid #ccc;"
                v-model="item.value"
                type="text"
                @input="onInput(index)"
                @keyup.delete="onDelete(index)"
              />
            </div>
            <div class="content-exit">
              <a-checkbox @change="onChange">记住密码</a-checkbox>
            </div>
            <a-button type="primary" @click="loginExam">登录</a-button>
          </div>
        </div>
      </div>
    </div>
    <div class="login-foot">
      <div class="login-foot-content">
          <div class="login-foot-left fl">
          <p>功能亮点</p>
          <div class="boots">
            <div
              class="item"
              v-for="(item, index) in bootList"
              :key="index"
              :style="`background-image:url(${item.bg})`"
            >
              <!-- :style="`background-image: url('${item.bg}')`" -->
              <div class="foot-left-title">{{ item.title }}</div>
              <div class="c">{{ item.content }}</div>
            </div>
          </div>
          <a href="#">查看更多>></a>
        </div>
        <div class="login-foot-right fl">
          <p>通知公告</p>
          <div v-for="(item, index) in questionList" :key="index">
            <div class="q fl">{{ item.question }}</div>
            <div class="a fl">{{ item.time }}</div>
          </div>
          <a href="#">查看更多>></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      schoolShow: false,
      userName: localStorage.getItem('userName') || '',
      password: localStorage.getItem('password') || '',
      schoolName: '',
      schoolId: '',
      schoolList: [],
      verifycode: '',
      verImg: '/api/portal/login/getVerifyCode',
      remenberMe: false,
      digits: [
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        }
      ],
      commond: '',
      loading: false,
      isCode: 2,
      passInput: false,
       bootList: [
        {
          title: '智能化全流程',
          content: '智能快速导入建题，组卷、支持多人监考，批阅',
          bg: require("../assets/images/bg-bright-dot1.png"),
        },
        {
          title: '大数据职能支持',
          content: '智能快速导入建题，组卷、支持多人监考，批阅',
          bg:  require("../assets/images/bg-bright-dot2.png"),
        },
        {
          title: '多终端支持',
          content: '智能快速导入建题，组卷、支持多人监考，批阅',
          bg: require("../assets/images/bg-bright-dot3.png"),
        },
        {
          title: '多方式防作弊',
          content: '智能快速导入建题，组卷、支持多人监考，批阅',
          bg: require("../assets/images/bg-bright-dot4.png"),
        },
      ],
      questionList: [
        {
          question: '考试系统中题库分类功能有哪些用处?',
          time: '2022-04-01',
        },
        {
          question: '考试系统中题库分类功能有哪些用处?',
          time: '2022-04-01',
        },
        {
          question: '考试系统中题库分类功能有哪些用处?',
          time: '2022-04-01',
        },
        {
          question: '考试系统中题库分类功能有哪些用处?',
          time: '2022-04-01',
        },
        {
          question: '考试系统中题库分类功能有哪些用处?',
          time: '2022-04-01',
        },
        {
          question: '考试系统中题库分类功能有哪些用处?',
          time: '2022-04-01',
        },
        {
          question: '考试系统中题库分类功能有哪些用处?',
          time: '2022-04-01',
        },
      ],
    };
  },
  props: {
    examId: {
      type: String,
      default: ''
    },
    useType: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.commandLigin();
  },
  methods: {
    commandLigin() {
      this.$http
        .post('/api/portal/LoginforOur/commandLigin', {
          examId: this.examId //考试Id
        })
        .then((res) => {
          this.isCode = res.isCode;
          this.examId = res.id;
          if (this.useType == 2) {
            this.passInput = true;
          } else {
            if (this.isCode == 2) {
              this.passInput = true;
            }
          }
          if (res.isLogin == 1 && this.useType != 2) {
            localStorage.setItem('bacthId', res.batchId);
            if (res.isCode == 2) {
              this.$router.push({
                name: 'wordLogin',
                params: {
                  examId: res.id //考试Id
                }
              });
            } else {
              this.$router.push({
                name: 'enterExam',
                params: {
                  Id: res.id //考试Id
                }
              });
            }
          }
        });
    },
    handleChange(value) {
      this.schoolId = value;
    },
    handleFocus() {
      this.schoolName = '';
      this.getSchoolList();
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    getImg() {
      var e = document.getElementById('verImg');
      e.src = this.verImg + '?t=' + Math.random();
    },
    getLogin() {
      this.loading = true;
      this.$http
        .post('/api/portal/login/login', {
          userName: this.userName, //用户名
          password: this.password, //密码
          schoolId: this.schoolId, //学校Id（第一次不传，当后台发现用户名和密码不唯一，会弹出学校列表选学校）
          verifycode: this.verifycode //验证码
        })
        .then((res) => {
          this.loading = false;
          if (res.code > 0) {
            this.$message.success(res.msg);
            localStorage.setItem('userName', res.userName);
            localStorage.setItem('userId', res.userId);
            localStorage.setItem('schoolName', res.schoolName);
            localStorage.setItem('schoolId', res.schoolId);
            localStorage.setItem('displayName', res.displayName);
            localStorage.setItem('token', res.token);
            localStorage.setItem('userType', res.userType);
            localStorage.setItem('avatorUrl', res.avatorUrl);
            localStorage.setItem('remenberMe', res.remenberMe);
            localStorage.setItem('logoUrl', res.logoUrl);
            if (this.remenberMe) {
              localStorage.setItem('password', this.password);
            }
            this.$router.push({
              name: res.url,
              params: {}
            });
          } else if (res.code == -100) {
            this.$message.warning(res.msg);
            this.getSchoolList();
            this.schoolShow = true;
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    handleSearch(value) {
      this.schoolName = value;
      this.getSchoolList();
    },
    getSchoolList() {
      this.$http
        .post('/api/portal/login/getSchoolList', {
          q: this.schoolName
        })
        .then((res) => {
          this.schoolList = res;
        });
    },
    // 记住密码
    onChange(e) {
      this.remenberMe = e.target.checked;
    },
    onInput(index) {
      // index < 5 ，如果是第6格，不触发光标移动至下一个输入框。
      if (this.digits[index].value.length > 1) {
        this.digits[index].value = this.digits[index].value[1];
      }
      if (this.digits[index].value && index < 7) {
        this.$refs['ref' + (index + 1)][0].focus();
      }
      if (this.digits[index].value && index == 7) {
        this.getNum();
      }
    },
    onDelete(index) {
      if (this.digits[index].value == '' && index > 0) {
        this.$refs['ref' + (index - 1)][0].focus();
      }
    },
    getNum() {
      var num = '';
      for (let i = 0; i < this.digits.length; i++) {
        num = num + this.digits[i].value;
      }
      this.commond = num;
    },
    loginExam() {
      this.loading = true;
      this.$http
        .post('/api/portal/LoginForOur/loginExam', {
          userName: this.userName, //账号
          userPwd: this.password, //密码
          isCode: this.isCode, //是否口令登录
          commond: Number(this.commond), //口令
          useType: this.useType,
          examId: this.examId //考试Id
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.$message.success(rst.msg);

            if (rst.loginType == 1) {
              this.$router.push({
                name: 'enterExam',
                params: {
                  Id: rst.examId //考试Id
                }
              });
            } else if (rst.loginType == 2) {
              this.$router.push({
                name: 'proctorManage',
                params: {
                  examid: rst.examId, //考试Id
                  paperType: this.$route.params.paperType
                }
              });
            }
          } else {
            this.$message.error(rst.msg);
            if (this.isCode == 2) {
              this.digits = [
                { value: '' },
                { value: '' },
                { value: '' },
                { value: '' },
                { value: '' },
                { value: '' },
                { value: '' },
                { value: '' }
              ];
              this.$refs['ref' + 0][0].focus();
            }
          }
        });
    }
  }
};
</script>
